<template>
    <div>
        <div class="my-select" :class="{
            'pl-2 pr-2': props.label,
            'pb-[10px]': props.label && props.mode == 'view',
            'pt-4': props.label && props.mode == 'view'
        }">
            <div :class="{
                'mb-4': props.mode != 'view',
                'mb-1': props.mode == 'view'
            }" class="flex" v-if="props.label" :style="{ opacity: props.label == '#' ? 0 : 1 }">
                <div class="text-error text-[14px] leading-[14px]" v-if="props.required && props.mode != 'view'">*</div>
                <div class="text-text--primary text-[14px] leading-[14px] font-[500]">{{ $t(props.label) }}</div>
            </div>
            <div class="relative">
                <!-- 编辑模式 -->
                
                <v-select v-if="props.mode != 'view'" :error-messages="props.errorMessages" :clearable="props.clearable"
                    v-model="value" color="primary" :chips="props.chips" label="" :hint="props.hint"
                    :items="props.items" :item-title="props.itemTitle" :item-value="props.itemValue"
                    :multiple="props.multiple" :readonly="props.readonly" :disabled="props.disabled"
                    :rules="props.rules" :placeholder="props.placeholder" variant="outlined"
                    :return-object="props.returnObject">

                    <!-- 特殊选择 选项，用户头像 -->
                    <template v-slot:item="{ props: itemProps, item }" v-if="avatars == true">
                        <v-list-item v-bind="itemProps" title="" class="pl-0 pr-0 pt-0 pb-0">
                            <itemAvatars v-model="value" :item="item" :multiple="props.multiple"
                                :itemTitle="props.itemTitle" :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                                :itemAvatar="props.itemAvatar" :itemPosition="props.itemPosition"></itemAvatars>
                        </v-list-item>
                    </template>

                    <!-- 特殊选择 结果，用户头像 -->
                    <template v-slot:selection="{ item, index }" v-if="avatars == true">
                        <resultAvatars :item="item" :multiple="props.multiple" :itemTitle="props.itemTitle"
                            :itemValue="props.itemValue" :itemDesc="props.itemDesc" :itemAvatar="props.itemAvatar"
                            :itemPosition="props.itemPosition" @del="delItem(item, index)"></resultAvatars>
                    </template>

                    <!-- 特殊选择 选项，圆点标签 -->
                    <template v-slot:item="{ props: itemProps, item }" v-if="dotLabel == true">
                        <v-list-item v-bind="itemProps" title="" class="pl-0 pr-0 pt-0 pb-0">
                            <itemDotLabel v-model="value" :item="item" :multiple="props.multiple"
                                :itemTitle="props.itemTitle" :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                                :itemLabelColor="props.itemLabelColor"></itemDotLabel>
                        </v-list-item>
                    </template>

                    <!-- 特殊选择 结果，圆点标签 -->
                    <template v-slot:selection="{ item, index }" v-if="dotLabel == true">
                        <resultDotLabel :item="item" :multiple="props.multiple" :itemTitle="props.itemTitle"
                            :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                            :itemLabelColor="props.itemLabelColor"></resultDotLabel>
                    </template>

                    <!-- 特殊选择 选项，颜色文字 -->
                    <template v-slot:item="{ props: itemProps, item }" v-if="colorText == true">
                        <v-list-item v-bind="itemProps" title="" class="pl-0 pr-0 pt-0 pb-0">
                            <itemColorText v-model="value" :item="item" :multiple="props.multiple"
                                :itemTitle="props.itemTitle" :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                                :itemLabelColor="props.itemLabelColor"></itemColorText>
                        </v-list-item>
                    </template>

                    <!-- 特殊选择 结果，颜色文字 -->
                    <template v-slot:selection="{ item, index }" v-if="colorText == true">
                        <resultColorText :item="item" :multiple="props.multiple" :itemTitle="props.itemTitle"
                            :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                            :itemLabelColor="props.itemLabelColor"></resultColorText>
                    </template>

                </v-select>
                <!-- 查看模式 -->
                <div class="pt-[5px] pb-[5px] text-text--primary font-[400] text-[14px] leading-[24px] min-h-[36px]"
                    v-if="props.mode == 'view'">
                    <!-- 头像选择结果 -->
                    <div v-if="props.avatars == true">
                        <resultAvatars mode="view" class="mr-1 !h-[auto]" :item="item" :multiple="props.multiple"
                            :itemTitle="props.itemTitle" :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                            :itemAvatar="props.itemAvatar" :itemPosition="props.itemPosition"
                            v-for="item in valueObjArr" :key="item[props.itemValue]"></resultAvatars>
                    </div>
                    <!-- 圆点标签选择结果 -->
                    <div class="flex flex-wrap" v-else-if="props.dotLabel == true">
                        <resultDotLabel mode="view" :item="item" :multiple="props.multiple" :itemTitle="props.itemTitle"
                            :itemValue="props.itemValue" :itemDesc="props.itemDesc"
                            :itemLabelColor="props.itemLabelColor" v-for="item in valueObjArr"
                            :key="item[props.itemValue]"></resultDotLabel>
                    </div>
                    <!-- 普通结果 -->
                    <div v-else>{{ valueTextArr.join(", ") }}</div>
                </div>
                <!-- 新提示 -->
                <mrc_ess_InputBottomTip :tip="props.tip" :tipDetail="props.tipDetail"></mrc_ess_InputBottomTip>
            </div>
        </div>
        <!-- 分割线 -->
        <v-divider v-if="props.mode == 'view' && props.label"></v-divider>
        <!-- 间距 -->
        <div class="pointer-events-none" v-if="props.mode != 'view' || props.spacing == true" :style="{
            height: props.spacingHeight + 'px'
        }"></div>
    </div>
</template>

<script lang="ts" setup>
// 圆点标签类型
import itemDotLabel from './components/itemDotLabel.vue';
import resultDotLabel from './components/resultDotLabel.vue';

// 用户头像类型
import itemAvatars from './components/itemAvatars.vue';
import resultAvatars from './components/resultAvatars.vue';

// 颜色文字类型
import itemColorText from './components/itemColorText.vue';
import resultColorText from './components/resultColorText.vue';

import { ref, reactive, watch, nextTick, toRaw, computed } from 'vue';
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
    modelValue: {
        type: [Number, String, Array],
        default: ""
    },
    mode: {
        type: String,
        default: "edit"
    },
    spacing: {
        type: Boolean,
        default: false
    },
    spacingHeight: {
        type: [String, Number],
        default: 32
    },
    label: {
        type: String,
        default: ""
    },
    required: {
        type: Boolean,
        default: false
    },
    placeholder: {
        type: String,
        default: ""
    },
    clearable: {
        type: Boolean,
        default: false
    },
    hint: {
        type: String,
        default: ""
    },
    // 展示类型 贴纸
    chips: {
        type: Boolean,
        default: false
    },
    // 展示类型 人物头像
    avatars: {
        type: Boolean,
        default: false
    },
    // 展示类型 圆点标签
    dotLabel: {
        type: Boolean,
        defalt: false
    },
    // 展示类型 颜色文字
    colorText: {
        type: Boolean,
        defalt: false
    },
    // 头像的字段
    itemAvatar: {
        type: String,
        default: "avatar"
    },
    multiple: {
        type: Boolean,
        default: false
    },
    items: {
        type: Array,
        default: []
    },
    disabled: {
        type: Boolean,
        default: false
    },
    readonly: {
        type: Boolean,
        default: false
    },
    rules: {
        type: Array,
        default: []
    },
    // 标题字段
    itemTitle: {
        type: String,
        default: "title"
    },
    // 值字段
    itemValue: {
        type: String,
        default: "value"
    },
    // 描述字段
    itemDesc: {
        type: String,
        default: "desc"
    },
    // 職位字段
    itemPosition: {
        type: String,
        default: "position"
    },
    // 标签颜色字段
    itemLabelColor: {
        type: String,
        default: "labelColor"
    },
    returnObject: {
        type: Boolean,
        default: false
    },
    errorMessages: {
        type: String,
        default: ""
    },
    tip: {
        type: String,
        default: ""
    },
    tipDetail: {
        type: String,
        default: ""
    },
    autocomplete: {
        type: Boolean,
        default: true
    }
})
const value = ref<any>(props.modelValue || (props.multiple == true ? [] : null));
watch(value, (val) => {
    emit("update:modelValue", val);
})
watch(() => props.modelValue, (val) => {
    value.value = props.modelValue || (props.multiple == true ? [] : null);
}, {
    immediate: true
})
// 数据回显
const valueObjArr = computed(() => {
    if (props.items && props.items.length) {
        let result = props.items.filter((item: any) => {
            return props.multiple ? value.value.indexOf(item[props.itemValue]) > -1 : value.value == item[props.itemValue]
        });
        return result;
    }
    return [];
})
const valueTextArr = computed(() => {
    if (props.items && props.items.length) {
        let result = props.items.filter((item: any) => {
            if (props.multiple) {
                console.log(value.value);
            }
            return props.multiple ? value.value.indexOf(item[props.itemValue]) > -1 : value.value == item[props.itemValue]
        });
        result = result.map((item: any) => {
            return item[props.itemTitle]
        })
        return result;
    }
    return [];
})
// 手动删除
function delItem(item: any, index: number) {
    if (props.multiple) {
        let arr = value.value.filter((it: any) => {
            return it != item.value
        })
        value.value = arr;
    } else {
        value.value = null;
    }
}
</script>

<style scoped>
.my-select :deep(.v-field__input) {
    min-height: 34px;
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
}

.my-select :deep(.v-input) {
    box-shadow: 0px 1px 2px 0px #0000000D;
}

.my-select :deep(.v-input__details) {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -18px;
    pointer-events: none;
    padding-left: 0;
    padding-top: 0;
    font-size: 14px;
    line-height: 18px;
}

.my-select :deep(.v-field__outline) {
    color: #B1B2B5;
}

.my-select :deep(.v-field--appended) {
    padding-right: 6px;
}
</style>